<template>
	<view class="content">
		<view class="top-goods-info-box">
			<view class="goods-item-box">
				<view class="left-img-box">
					<image :src="info.image" mode=""></image>
				</view>
				<view class="right-info-box">
					<view class="top-box">
						<text class="ellipsis">{{ info.store_name }}</text>
						<text>x{{ info.total_num }}</text>
					</view>
					<view class="center-box">
						<text>{{ info.product_sku }}</text>
					</view>
					<view class="bottom-box">
						{{ order_type == 1? '￥' : '' }}<text>{{ info.pay_integral }}</text>{{ order_type == 2? '积分' : '' }}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-th-info-box">
			<view class="title-content-box">
				<view class="title-box flex-b">
					<text>{{ refund_type == 1? '退款' : '售后' }}原因</text>
					<text>{{ msgNum }}/45</text>
				</view>
				<view class="content-box">
					<textarea maxlength="45" v-model="refund_message" placeholder="请输入申请退款/售后的原因" placeholder-style="color:#CCCCCC"></textarea>
				</view>
			</view>
			<view class="upload-img-box">
				<view class="title-box">
					<text>上传照片</text>
				</view>
				<view class="input-box">
					<view class="upload-img-box flex-c-w">
						<view class="upload-img-box-item" v-for="(item, index) in imgList" @click="bindImgPreview(item.path)" :key="index">
						    <image :src="item.path" mode="aspectFill"></image>
							<view class="del" @click.stop="bindDel(index)">
								<image src="/pageMember/static/icon12.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="upload-img-item" @click="bindAddImg">
						    <image src="../static/icon11.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-plate-box">
			<!-- 底部but -->
			<view class="bottom-but-box" @click="submitFun">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	let channel
	export default {
		data(){
			return {
				info: {}, // 基本信息
				order_type: '', // 订单类型
				refund_type: '', // 售后类型
				refund_message: '', // 原因
				imgList: [], // 图片列表
			}
		},
		computed: {
			msgNum: function () {
				const { refund_message } = this
				return refund_message.length
			},
		},
		onLoad() {
			channel = this.getOpenerEventChannel()
			channel.on('changeStatus', option => {
				const { item, order_type, refund_type } = option
				this.info = item
				this.order_type = order_type
				this.refund_type = refund_type
				console.log(option)
			})
		},
		methods:{
			bindAddImg(){ // 图片上传
				this.$uploadPic(9, res => {
					const { imgList } = this
					this.imgList = [...imgList, ...res]
				})
			},
			// 图片预览
			bindImgPreview: function (current) {
				const { imgList, urls = imgList.map(item => item.path) } = this
				uni.previewImage({
					current,
					urls
				})
			},
			// 删除图片
			bindDel: function (index) {
				this.imgList.splice(index, 1)
			},
			// 提交
			submitFun: async function () {
				const {
					info: { order_id },
					refund_type,
					order_type,
					refund_message,
					imgList,
				} = this
				if (!refund_message) {
					uni.showToast({
						title: '请填写原因',
						icon: 'none'
					})
					return
				}
				const param = {
					order_id,
					refund_type,
					order_type,
					refund_message,
					pics: imgList.map(item => item.id).join(',')
				}
				console.log(param)
				uni.showLoading({ title: '加载中' })
				const { code, data, message } = await this.$u.api.setApplyService(param)
				if (code == '1') {
					console.log('申请状态', data)
					uni.redirectTo({
						url: '/pageMember/tarbar/submitSuccess?status=3',
					})
					channel.emit('changeStatus', true)
				} else {
					this.$showToast(message || '提交失败')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: calc(100vh - 195rpx);
		overflow: hidden;
		overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		background: white;
		.top-goods-info-box{
			padding: 20rpx;
			background: #fff;
			border-bottom: 20rpx solid #F5F5F5;
			.goods-item-box{
				display: flex;
				margin-bottom: 30rpx;
				.left-img-box{
					flex: 0.2;
					line-height: 0;
					image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
				}
				.right-info-box{
					flex: 0.8;
					padding-left: 20rpx;
					.top-box{
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
						display: flex;
						padding-bottom: 20rpx;
						text:first-child{flex: 0.8;}
						text:last-child{flex: 0.2;font-size: 28rpx;font-weight: 400;color: #999999;text-align: right;}
					}
					.center-box{
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						padding-bottom: 70rpx;
					}
					.bottom-box{
						font-size: 22rpx;
						font-weight: bold;
						color: #333333;
						text{font-size: 30rpx;}
					}
				}
			}
		}
		.bottom-th-info-box{
			padding: 20rpx;
			background: #fff;
			.title-content-box{
				margin-bottom: 30rpx;
				.title-box{
					padding-bottom: 30rpx;
					text:first-child{font-size: 30rpx;font-weight: bold;color: #333333;}
					text:last-child{font-size: 26rpx;font-weight: 400;color: #999999;}
				}
				.content-box{
					width: 100%;
					textarea{width: 94%;height: 200rpx;padding: 20rpx;background: #F5F6FA;}
				}
			}
			.upload-img-box{
				.title-box{
					padding-bottom: 30rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
				.input-box{
					position: relative;
					width: 100%;
					input{
						font-size: 30rpx;
						font-weight: 400;
						padding: 30rpx;
						border: 1rpx solid #000;
						border-radius: 20rpx;
					}
					.upload-img-box{
						width: 100%;
						.upload-img-box-item{
							position: relative;
							line-height: 0;
							image{width: 210rpx;height: 210rpx;margin: 0 20rpx 20rpx 0;}
							.del{
								position: absolute;
								top: 0;
								right: 20rpx;
								image{width: 35rpx; height: 35rpx;margin: auto;}
							}
						}
						.upload-img-item{
							width: 210rpx;
							height: 210rpx;
							background: #F5F6FA;
							margin-bottom: 20rpx;
							display: flex; justify-content: center; align-items: center;
							image{width: 60rpx;height: 60rpx;}
						}
					}
				}
			}
		}
		.bottom-plate-box{
			position: fixed;bottom: 0;
			z-index: 100;
			width: 100%;
			padding: 20rpx 20rpx;
			padding-bottom: 80rpx;
			background: #fff;
		.bottom-but-box{
			padding: 25rpx 0;
			background: #000;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 50rpx;
			}
		}
	}
</style>